<template>
    <div class="operate-log-container">
        <el-card shadow="never">
            <template slot="header">
                <span>操作日志</span>
            </template>

            <!-- 搜索区域 -->
            <div class="clearfix">
                <el-form :inline="true" class="search-form">
                    <el-form-item label="模块标题">
                        <el-input v-model="query.title" placeholder="请输入模块标题" clearable />
                    </el-form-item>
                    <el-form-item label="操作人员">
                        <el-input v-model="query.operName" placeholder="请输入操作人员" clearable />
                    </el-form-item>
                    <el-form-item label="业务类型">
                        <el-select v-model="query.businessType" placeholder="全部" clearable filterable style="width: 160px;">
                            <el-option v-for="item in BUSINESS_TYPE_OPTIONS" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="请求地址">
                        <el-input v-model="query.operUrl" placeholder="请输入请求地址" clearable />
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="query.status" placeholder="全部" clearable style="width: 120px;">
                            <el-option :value="0" label="正常" />
                            <el-option :value="1" label="异常" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间范围">
                        <el-date-picker v-model="timeRange" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        <el-button icon="el-icon-refresh-right" @click="handleReset">重置</el-button>
                        <el-button type="danger" icon="el-icon-delete" @click="handleClean" v-auth="'del'">清空日志</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 表格区域 -->
            <el-table v-loading="loading" element-loading-text="数据正在加载中" :data="list" border fit
                highlight-current-row style="width: 100%">
                <el-table-column label="序号" width="60" align="center">
                    <template slot-scope="{ $index }">{{ (query.current - 1) * query.size + $index + 1 }}</template>
                </el-table-column>
                <el-table-column prop="title" label="模块标题" align="left" min-width="160" />
                <el-table-column prop="method" label="方法名称" align="left" min-width="160" />
                <el-table-column prop="requestMethod" label="请求方式" align="center" width="100" />
                <el-table-column prop="businessType" label="业务类型" align="center" width="120">
                    <template slot-scope="{ row }">{{ getBusinessTypeLabel(row.businessType) }}</template>
                </el-table-column>
                <el-table-column prop="operName" label="操作人员" align="center" width="120" />
                <el-table-column prop="deptName" label="部门名称" align="center" width="140" />
                <el-table-column prop="operUrl" label="请求URL" align="left" min-width="200" show-overflow-tooltip />
                <el-table-column prop="operIp" label="主机地址" align="center" width="130" />
                <el-table-column prop="operLocation" label="操作地点" align="center" min-width="150" show-overflow-tooltip />
                <el-table-column prop="status" label="状态" align="center" width="100">
                    <template slot-scope="{ row }">
                        <el-tag :type="row.status === 0 ? 'success' : 'danger'">{{ row.status === 0 ? '正常' : '异常' }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="errorMsg" label="错误消息" align="left" min-width="200" show-overflow-tooltip />
                <el-table-column prop="costTime" label="消耗时间(ms)" align="center" width="120" />
                <el-table-column prop="operTime" label="操作时间" align="center" width="180" />
            </el-table>

            <Pagination v-if="total > 0" :page="query.current" :page_size="query.size" :total="total"
                @sizeChange="handleSizeChange" @currentChange="handleCurrentChange" />
        </el-card>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination.vue'
import { operateLogList, operateLogClean } from '../api/operateLog'

// 业务类型映射（枚举字符串）
const BUSINESS_TYPE_LABELS = {
    OTHER: '其它',
    INSERT: '新增',
    UPDATE: '修改',
    DELETE: '删除',
    SELECT: '查询'
}
const BUSINESS_TYPE_OPTIONS = [
    { value: 'OTHER', label: '其它' },
    { value: 'INSERT', label: '新增' },
    { value: 'UPDATE', label: '修改' },
    { value: 'DELETE', label: '删除' },
    { value: 'SELECT', label: '查询' }
]

export default {
    name: 'OperateLogList',
    components: { Pagination },
    data() {
        return {
            BUSINESS_TYPE_OPTIONS,
            loading: false,
            list: [],
            total: 0,
            query: {
                current: 1,
                size: 20,
                title: null,
                operName: null,
                businessType: null,
                operUrl: null,
                status: 0,
                startTime: null,
                endTime: null
            },
            timeRange: []
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getBusinessTypeLabel(value) {
            return BUSINESS_TYPE_LABELS?.[value] ?? value
        },
        async getList() {
            this.loading = true
            try {
                const res = await operateLogList(this.query)
                this.list = res.records || res.list || []
                this.total = res.total || res.count || 0
            } finally {
                this.loading = false
            }
        },
        handleSearch() {
            if (this.timeRange && this.timeRange.length === 2) {
                this.query.startTime = this.timeRange[0]
                this.query.endTime = this.timeRange[1]
            } else {
                this.query.startTime = ''
                this.query.endTime = ''
            }
            this.query.current = 1
            this.getList()
        },
        handleReset() {
            this.query = {
                current: 1,
                size: 20,
                title: null,
                operName: null,
                businessType: null,
                operUrl: null,
                status: 0,
                startTime: null,
                endTime: null
            }
            this.timeRange = []
            this.getList()
        },
        handleSizeChange(size) {
            this.query.size = size
            this.query.current = 1
            this.getList()
        },
        handleCurrentChange(page) {
            this.query.current = page
            this.getList()
        },
        handleClean() {
            this.$confirm('确定清空全部操作日志吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await operateLogClean()
                this.$message.success('清空成功')
                this.getList()
            }).catch(() => {})
        }
    }
}
</script>

<style scoped lang="scss">
.operate-log-container {
    padding: 20px;
}

.search-form {
    margin-bottom: 20px;
}
</style>


